<template>
    <!-- 配置页面 -->
    <div class="config">
        <card-pane>
            <template v-slot:title>
                <span class="label">
                    <svg-icon
                        icon-class="font-layout-2-fill"
                        class="font-layout-2-fill"
                    />
                    <span class="text">基础设置</span>
                </span>
            </template>
            <template v-slot:list>
                <div class="list">
                    <base-form
                        :formItems="formItems"
                        :formConfig="formConfig"
                        :formData="formSubmit"
                        @onSelectChange="handelSelectChange"
                        ref="searchForm"
                    >
                        <template slot="prefixIcon">
                            <el-form-item class="menu-icon" label="头部图标">
                                <el-popover
                                    placement="right"
                                    width="800"
                                    trigger="click"
                                    v-model="prefixIconIconSelectVisible"
                                >
                                    <icon-select
                                        @CheckedIcon="handelCheckedPrefixIcon"
                                    />
                                    <el-input
                                        slot="reference"
                                        placeholder="选择头部图标"
                                        v-model="formSubmit.prefixIcon"
                                        clearable
                                        @click="
                                            prefixIconIconSelectVisible = !prefixIconIconSelectVisible
                                        "
                                    >
                                        <svg-icon
                                            v-if="formSubmit.prefixIcon"
                                            slot="prefix"
                                            :icon-class="formSubmit.prefixIcon"
                                            :class="formSubmit.prefixIcon"
                                        />
                                    </el-input>
                                </el-popover>
                            </el-form-item>
                        </template>
                        <template slot="suffixIcon">
                            <el-form-item class="menu-icon" label="尾部图标">
                                <el-popover
                                    placement="right"
                                    width="800"
                                    trigger="click"
                                    v-model="suffixIconIconSelectVisible"
                                >
                                    <icon-select
                                        @CheckedIcon="
                                            handelCheckedSuffixIconIcon
                                        "
                                    />
                                    <el-input
                                        slot="reference"
                                        placeholder="选择尾部图标"
                                        v-model="formSubmit.suffixIcon"
                                        clearable
                                        @click="
                                            suffixIconIconSelectVisible = !suffixIconIconSelectVisible
                                        "
                                    >
                                        <svg-icon
                                            v-if="formSubmit.suffixIcon"
                                            slot="prefix"
                                            :icon-class="formSubmit.suffixIcon"
                                            :class="formSubmit.suffixIcon"
                                        />
                                    </el-input>
                                </el-popover>
                            </el-form-item>
                        </template>
                    </base-form>
                </div>
            </template>
        </card-pane>
        <card-pane>
            <template v-slot:title>
                <span class="label">
                    <svg-icon
                        icon-class="font-layout-2-fill"
                        class="font-layout-2-fill"
                    />
                    <span class="text">规则项设置</span>
                </span>
            </template>
            <template v-slot:list>
                <div class="list">
                    <base-form
                        :formItems="ruleItems"
                        :formConfig="ruleConfig"
                        :formData="ruleSubmit"
                        ref="searchForm"
                    >
                        <template slot="customRule">
                            <el-form-item
                                class="menu-icon"
                                label="自定义规则项"
                            >
                                <el-button
                                    type="primary"
                                    @click="handelOpenCestomRule"
                                    >自定义编码</el-button
                                >
                            </el-form-item>
                        </template>
                    </base-form>
                </div>
            </template>
        </card-pane>
        <!-- 预览弹框 -->
        <el-dialog
            title="自定义规则项"
            :visible.sync="cestomRule"
            width="60%"
            v-dialogDrag
            append-to-body
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div class="edit-rule-contener">
                <monaco-editor
                    :editorOptions="editorOptions"
                    @onCodeChange="cesiumRuleEditChange"
                />
            </div>
            <!-- 新增 -->
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handelCloseCestomRule"
                    >取 消</el-button
                >
                <el-button
                    size="small"
                    type="primary"
                    @click="handelConfirmCestomRule"
                    >确 认</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<script>
import BaseForm from '@/components/baseForm/index.vue'
import CardPane from '../../base/components/cardPane.vue'
import IconSelect from '@/components/iconSelect/index'
import MonacoEditor from '@/components/monacoEditor/index'
import { ruleOptions } from '../baseSetting/rules'
import { setFormItemProp } from '@/utils/tool'
export default {
    components: {
        BaseForm,
        IconSelect,
        CardPane,
        MonacoEditor
    },
    props: {
        curryCom: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    watch: {
        curryCom: {
            handler: async function(newVal) {
                if (
                    JSON.stringify(newVal) !== '{}' &&
                    JSON.stringify(newVal.value) !== '{}'
                ) {
                    await this.copyCol()
                    this.activeCol = newVal
                    this.generateFormItems(newVal)
                } else {
                    await this.copyCol()
                    return
                }
            },
            deep: true,
            immediate: true
        },
        ruleSubmit: {
            handler: function(newVal) {
                if (JSON.stringify(newVal) !== '{}') {
                    this.$bus.$emit('RulesChange')
                } else {
                    return
                }
            },
            deep: true
        }
    },
    data() {
        return {
            // 选中的列
            activeCol: {},
            // 配置表单的表单项列表
            formItems: [
                [
                    {
                        ltype: 'input',
                        placeholder: '请输入label文字',
                        label: 'label',
                        prop: 'label',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '请输入输入提示语',
                        label: '提示语',
                        prop: 'placeholder',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '请输入绑定的字段值',
                        label: '字段值',
                        prop: 'prop',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '禁用',
                        prop: 'disabled',
                        isShow: false
                    },
                    {
                        ltype: 'switch',
                        label: '可清空',
                        prop: 'clearable',
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'select',
                        placeholder: '请选择控件宽度',
                        label: '宽度',
                        options: [
                            {
                                label: '自动',
                                value: 'w-auto'
                            },
                            {
                                label: '一份',
                                value: 'w-1'
                            },
                            {
                                label: '两份',
                                value: 'w-2'
                            },
                            {
                                label: '三份',
                                value: 'w-3'
                            },
                            {
                                label: '四份',
                                value: 'w-4'
                            },
                            {
                                label: '五份',
                                value: 'w-5'
                            },
                            {
                                label: '六份',
                                value: 'w-6'
                            },
                            {
                                label: '七份',
                                value: 'w-7'
                            },
                            {
                                label: '八份',
                                value: 'w-8'
                            },
                            {
                                label: '九份',
                                value: 'w-9'
                            }
                        ],
                        prop: 'width',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'custom',
                        slotName: 'prefixIcon',
                        placeholder: '请选择图标',
                        label: '头部图标',
                        prop: 'prefixIcon',
                        width: 'w-1',
                        isShow: false,
                        prefixIcon: 'search'
                    }
                ],
                [
                    {
                        ltype: 'custom',
                        slotName: 'suffixIcon',
                        placeholder: '请选择图标',
                        label: '尾部图标',
                        prop: 'suffixIcon',
                        width: 'w-1',
                        isShow: false,
                        prefixIcon: 'search'
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '请输入头部文字',
                        label: '头部文字',
                        prop: 'prependContent',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '请输入尾部文字',
                        label: '尾部文字',
                        prop: 'appendContent',
                        width: 'w-1',
                        clearable: true,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '显示密码',
                        prop: 'showPassword',
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '显示字数',
                        prop: 'showWordLimit',
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'inputNumber',
                        label: '行数',
                        prop: 'rows',
                        width: 'w-1',
                        min: 0,
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'inputNumber',
                        label: '最大长度',
                        prop: 'maxlength',
                        min: 0,
                        width: 'w-1',
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'inputNumber',
                        label: '最小长度',
                        prop: 'minlength',
                        min: 0,
                        width: 'w-1',
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'select',
                        label: '可缩放',
                        prop: 'resize',
                        options: [
                            {
                                label: '禁止',
                                value: 'none'
                            },
                            {
                                label: '所有可缩放',
                                value: 'both'
                            },
                            {
                                label: '水平可缩放',
                                value: 'horizontal'
                            },
                            {
                                label: '垂直可缩放',
                                value: 'vertical'
                            }
                        ],
                        width: 'w-1',
                        isShow: false
                    }
                ]
            ],
            // 表单配置项
            formConfig: {
                labelPosition: 'left', // label对齐方式
                labelWidth: '80px',
                size: 'mini'
            },
            // 表单提交项
            formSubmit: {},
            // 头部图标选择框是否显示
            prefixIconIconSelectVisible: false,
            // 尾部图标选择框是否显示
            suffixIconIconSelectVisible: false,
            // 规则表单项
            ruleItems: [
                [
                    {
                        ltype: 'switch',
                        label: '是否必填',
                        prop: 'required',
                        isShow: true
                    }
                ],
                [
                    {
                        ltype: 'input',
                        placeholder: '请输入必填校验提示',
                        label: '必填校验提示',
                        prop: 'message',
                        width: 'w-1',
                        clearable: true,
                        isShow: true
                    }
                ],
                [
                    {
                        ltype: 'select',
                        placeholder: '请选择其它校验',
                        label: '其它校验',
                        options: ruleOptions,
                        prop: 'validator',
                        width: 'w-1',
                        clearable: true,
                        isShow: true
                    }
                ],
                [
                    {
                        ltype: 'custom',
                        slotName: 'customRule',
                        placeholder: '自定义规则项',
                        label: '自定义规则项',
                        prop: 'customRule',
                        width: 'w-1',
                        isShow: true,
                        prefixIcon: 'search'
                    }
                ]
            ],
            // 规则表单配置项
            ruleConfig: {
                labelPosition: 'left', // label对齐方式
                labelWidth: '100px',
                size: 'mini'
            },
            // 规则表单提交项
            ruleSubmit: {
                required: false,
                message: '',
                validator: ''
            },
            // 自定义规则项
            cestomRule: false,
            cestomRuleValue: '',
            editorOptions: {
                value: `
					function fn(rule, value, callback){
						if (value) {
							var reg = /*请输入您要自定义的正则*/
							if (reg.test(value) === false) {
								callback(new Error('/*请输入验证不通过的提示*/'))
							} else {
								callback()
							}
						} else {
							callback()
						}
					}
				`,
                language: 'js'
            }
        }
    },
    methods: {
        copyCol() {
            return new Promise((resove, reject) => {
                try {
                    this.formItems.forEach(ele => {
                        if (ele.length > 0) {
                            ele.forEach(element => {
                                this.formItems = setFormItemProp(
                                    this.formItems,
                                    element.prop,
                                    'isShow',
                                    false
                                )
                            })
                        }
                    })
                    this.formSubmit = {}
                    this.activeCol = {}
                    resove(true)
                } catch (error) {
                    reject(error)
                }
            })
        },
        /**
         * 生成动态表单项
         */
        async generateFormItems(config) {
            if (config.value && JSON.stringify(config.value) !== '{}') {
                this.formSubmit = config.value
                for (const key in config.value) {
                    if (Object.hasOwnProperty.call(config.value, key)) {
                        this.formItems = setFormItemProp(
                            this.formItems,
                            key,
                            'isShow',
                            true
                        )
                    }
                }
            }
            if (config.rule && JSON.stringify(config.rule) !== '{}') {
                this.ruleSubmit = config.rule
            }
        },
        /**
         * 选择头部图标
         */
        handelCheckedPrefixIcon(params) {
            this.$set(this.formSubmit, 'prefixIcon', params)
            this.prefixIconIconSelectVisible = false
        },
        /**
         * 选择尾部图标
         * @param {*} params
         */
        handelCheckedSuffixIconIcon(params) {
            this.$set(this.formSubmit, 'suffixIcon', params)
            this.suffixIconIconSelectVisible = false
        },
        /**
         * 开关控件值变化
         */
        handelSelectChange(data) {
            const propList = ['prependButtonLabel', 'prependButtonIcon']
            if (data.prop === 'prependButton') {
                if (data.data) {
                    this.$set(this.formSubmit, 'prependButton', {
                        icon: '',
                        label: ''
                    })
                    for (let index = 0; index < propList.length; index++) {
                        this.formItems = setFormItemProp(
                            this.formItems,
                            propList[index],
                            'isShow',
                            true
                        )
                    }
                } else {
                    this.$set(this.formSubmit, 'prependButton', false)
                    for (let index = 0; index < propList.length; index++) {
                        this.formItems = setFormItemProp(
                            this.formItems,
                            propList[index],
                            'isShow',
                            false
                        )
                    }
                }
            } else if (data.prop === 'appendButton') {
                if (data.data === true) {
                    this.$set(this.formSubmit, 'appendButton', {
                        icon: '',
                        label: ''
                    })
                } else {
                    this.$set(this.formSubmit, 'appendButton', false)
                }
            }
        },
        /**
         * 打开规则自定义弹框
         */
        handelOpenCestomRule() {
            this.cestomRule = true
        },
        /**
         * 确认自定义的规则
         */
        handelConfirmCestomRule() {
            try {
                // 将代码编辑器中编辑的内容转换为可执行的代码
                const paramsAndBody = this.cestomRuleValue
                    .replace(
                        /function\s*\w*\s*\((.*?)\)\s*{([\s\S]*)}/,
                        '$1|$2'
                    )
                    .split('|')
                const params = paramsAndBody[0]
                const body = paramsAndBody[1]
                this.ruleSubmit.validator = new Function(params, body)
            } catch (error) {
                throw new Error(error)
            }
            this.cestomRule = false
        },
        /**
         * 取消自定义的规则
         */
        handelCloseCestomRule() {
            this.cestomRule = false
        },
        /**
         * 自定义规则项变化
         */
        cesiumRuleEditChange(val) {
            this.cestomRuleValue = val
        }
    }
}
</script>
<style lang="scss">
.edit-rule-contener {
    @include box_flex(
        $width: 100%,
        $height: 60vh,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
}
</style>
<style lang="scss" scoped>
.config {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );

    overflow-y: auto;
    .list {
        padding: $margin-sm;
    }
}
</style>
